window.onload = function() {
	// 全局变量
	var main = getById("container"),
		title = getById("title"),//获取标题div
		titleList = title.getElementsByTagName("li"),
		banner = getById("banner"),//获取轮播图div
		bannerList = banner.getElementsByTagName("div"),//获取所有的轮播图片
		bannerLen = bannerList.length,//轮播图总数
		titleLen = titleList.length,//选项卡总数
		index = 0,//当前显示的图片索引
		timer = null;//定时器


	//启用轮播图
	autoBanner();
	// 鼠标移入清除定时器
	addHandler(main,"mouseover",clearBanner);
	// 鼠标移开添加定时器
	addHandler(main,"mouseout",autoBanner);
	//点击选项卡
	for(var j=0;j<titleLen;j++) {
		titleList[j].setAttribute("data-id",j);
		addHandler(titleList[j],"click",function(){
			index = this.getAttribute("data-id");
			changeImg();
		})
	}
	//轮播图定时器
	function autoBanner() {
		timer = setInterval(function(){
			index++;
			if(index>=bannerLen) {
				index=0;
			}
			// 调用切换图片方法
			changeImg()
		},1000)
	}
	// 清除定时器
	function clearBanner() {
		if(timer) {
			clearInterval(timer);
		}
	}

	//切换图片
	function changeImg() {
		//隐藏所有的图片
		for(var i=0;i<bannerLen;i++) {
			bannerList[i].style.display = "none";
			// 对应选项卡的切换
			titleList[i].style.background ="#fff";
		}
		// 展示当前索引对应的图片
		bannerList[index].style.display = "block";
		titleList[index].style.background ="#ffcc00";
		titleList[index].style.borderRadius ="5px";
	}

	// 封装getElementById
	function getById(id) {
		return typeof id === "string" ? document.getElementById(id) : id;
	}

	/**
	 * 封装通用事件方法（兼容IE）
	 * 绑定事件的DOM元素：element
	 * 事件名：type
	 * 事件处理程序：handler
	 */
	function addHandler(element,type,handler) {
		/**
		 * 支持addEventListener
		 * 非IE浏览器
		 */
		if(element.addEventListener) {
			element.addEventListener(type,handler,true);
		}else if(element.attachEvent) {
			// 支持DOM2级的IE浏览器
			element.attachEvent("on"+type,handler);
		}else {
			// 不支持DOM2级的IE浏览器
			element["on"+type] = handler;
		}
	}
}